<template>
    <!-- 双向绑定 v-model 简写：@ -->
    <button  @click="changeAge">修改姓名</button><br/>
    <button  @click="changeAge">修改年龄</button><br/>
    
    <!-- 我们一般用class来设定样式 -->
    <div class="person">
        <h1>姓名：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
    <!-- 单项绑定 v-bind 简写就是冒号 : -->
        <input :value="name"/>
    </div>
</template>

<script setup name="Person" lang="ts">
  import {ref} from 'vue'
  let name=ref("张三....");
  let age=ref(25);

  function changeAge(){
    age.value+=1;
  }
</script>

<style scoped>
    .person{
        background-color:aquamarine;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>

